<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义悬浮动画效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            min-height: 100vh;
            padding: 40px 20px;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .container {
            max-width: 1000px;
            width: 100%;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(10px);
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            background: linear-gradient(to right, #ff7e5f, #feb47b);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: #ddd;
            max-width: 700px;
            margin: 0 auto 20px;
            line-height: 1.6;
        }
        
        .animation-types {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }
        
        .animation-card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 25px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .animation-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .card-title {
            font-size: 1.5rem;
            margin-bottom: 20px;
            color: #ff9a8b;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .card-title i {
            font-size: 1.8rem;
        }
        
        .trigger {
            position: relative;
            display: inline-block;
            padding: 12px 25px;
            background: linear-gradient(45deg, #6a11cb, #2575fc);
            color: white;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 15px 0;
            overflow: hidden;
            z-index: 1;
            border: none;
            font-size: 1rem;
        }
        
        .trigger:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .tooltip {
            position: absolute;
            padding: 15px;
            background: #f9f9f9;
            color: #333;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            z-index: 1000;
            min-width: 200px;
            text-align: center;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .tooltip::before {
            content: '';
            position: absolute;
            width: 12px;
            height: 12px;
            background: #f9f9f9;
            transform: rotate(45deg);
        }
        
        /* 基础动画样式 */
        .tooltip-base {
            top: calc(100% + 15px);
            left: 50%;
            transform: translateX(-50%);
        }
        
        .tooltip-base::before {
            top: -6px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
        }
        
        /* 滑入滑出动画 */
        .slide-in-out .tooltip {
            transform: translateX(-50%) translateY(20px);
            transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .slide-in-out .trigger:hover + .tooltip {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        
        /* 淡入淡出动画 */
        .fade-in-out .tooltip {
            transition: opacity 0.4s ease, transform 0.4s ease;
            transform: translateX(-50%) scale(0.95);
        }
        
        .fade-in-out .trigger:hover + .tooltip {
            opacity: 1;
            transform: translateX(-50%) scale(1);
        }
        
        /* 弹跳效果动画 */
        .bounce-in-out .tooltip {
            transform: translateX(-50%) translateY(20px);
            transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
        
        .bounce-in-out .trigger:hover + .tooltip {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        
        /* 旋转进入动画 */
        .rotate-in-out .tooltip {
            transform: translateX(-50%) rotate(-10deg) scale(0.9);
            transform-origin: top center;
            transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .rotate-in-out .trigger:hover + .tooltip {
            opacity: 1;
            transform: translateX(-50%) rotate(0) scale(1);
        }
        
        /* 3D翻转动画 */
        .flip-in-out .tooltip {
            transform: translateX(-50%) perspective(1000px) rotateX(90deg);
            transform-origin: top center;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .flip-in-out .trigger:hover + .tooltip {
            opacity: 1;
            transform: translateX(-50%) perspective(1000px) rotateX(0);
        }
        
        /* 代码展示区域 */
        .code-container {
            background: #1e1e1e;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.5;
        }
        
        .code-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            color: #ff9a8b;
        }
        
        .copy-btn {
            background: rgba(255, 154, 139, 0.2);
            color: #ff9a8b;
            border: none;
            padding: 5px 10px;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .copy-btn:hover {
            background: rgba(255, 154, 139, 0.3);
        }
        
        pre {
            color: #d4d4d4;
        }
        
        .comment {
            color: #6a9955;
        }
        
        .selector {
            color: #d7ba7d;
        }
        
        .property {
            color: #9cdcfe;
        }
        
        .value {
            color: #ce9178;
        }
        
        footer {
            margin-top: 40px;
            text-align: center;
            color: #aaa;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .animation-types {
                grid-template-columns: 1fr;
            }
            
            h1 {
                font-size: 2.2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>自定义悬浮动画效果</h1>
            <p class="subtitle">探索CSS中自定义元素的进入和离开动画效果。每种效果都展示了不同的进入和退出动画实现方式。</p>
        </header>
        
        <div class="animation-types">
            <!-- 滑入滑出动画 -->
            <div class="animation-card slide-in-out">
                <h2 class="card-title">滑入滑出效果</h2>
                <p>平滑的上下滑动效果，带有弹性缓动函数</p>
                <button class="trigger">悬停查看效果</button>
                <div class="tooltip tooltip-base">
                    <strong>滑入滑出效果</strong>
                    <p>元素从上方滑入，悬停结束时滑出</p>
                </div>
                
                <div class="code-container">
                    <div class="code-header">
                        <span>CSS 代码</span>
                        <button class="copy-btn">复制代码</button>
                    </div>
                    <pre><code><span class="comment">/* 滑入滑出动画 */</span>
<span class="selector">.slide-in-out .tooltip</span> {
    <span class="property">transform</span>: <span class="value">translateX(-50%) translateY(20px)</span>;
    <span class="property">transition</span>: <span class="value">opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)</span>;
}

<span class="selector">.slide-in-out .trigger:hover + .tooltip</span> {
    <span class="property">opacity</span>: <span class="value">1</span>;
    <span class="property">transform</span>: <span class="value">translateX(-50%) translateY(0)</span>;
}</code></pre>
                </div>
            </div>
            
            <!-- 淡入淡出动画 -->
            <div class="animation-card fade-in-out">
                <h2 class="card-title">淡入淡出效果</h2>
                <p>平滑的淡入淡出效果，伴随轻微的缩放</p>
                <button class="trigger">悬停查看效果</button>
                <div class="tooltip tooltip-base">
                    <strong>淡入淡出效果</strong>
                    <p>元素淡入显示，悬停结束时淡出消失</p>
                </div>
                
                <div class="code-container">
                    <div class="code-header">
                        <span>CSS 代码</span>
                        <button class="copy-btn">复制代码</button>
                    </div>
                    <pre><code><span class="comment">/* 淡入淡出动画 */</span>
<span class="selector">.fade-in-out .tooltip</span> {
    <span class="property">transition</span>: <span class="value">opacity 0.4s ease, transform 0.4s ease</span>;
    <span class="property">transform</span>: <span class="value">translateX(-50%) scale(0.95)</span>;
}

<span class="selector">.fade-in-out .trigger:hover + .tooltip</span> {
    <span class="property">opacity</span>: <span class="value">1</span>;
    <span class="property">transform</span>: <span class="value">translateX(-50%) scale(1)</span>;
}</code></pre>
                </div>
            </div>
            
            <!-- 弹跳效果动画 -->
            <div class="animation-card bounce-in-out">
                <h2 class="card-title">弹跳效果</h2>
                <p>元素弹跳进入，带有超调效果</p>
                <button class="trigger">悬停查看效果</button>
                <div class="tooltip tooltip-base">
                    <strong>弹跳效果</strong>
                    <p>元素弹跳进入，悬停结束时平滑退出</p>
                </div>
                
                <div class="code-container">
                    <div class="code-header">
                        <span>CSS 代码</span>
                        <button class="copy-btn">复制代码</button>
                    </div>
                    <pre><code><span class="comment">/* 弹跳效果动画 */</span>
<span class="selector">.bounce-in-out .tooltip</span> {
    <span class="property">transform</span>: <span class="value">translateX(-50%) translateY(20px)</span>;
    <span class="property">transition</span>: <span class="value">opacity 0.4s ease, transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)</span>;
}

<span class="selector">.bounce-in-out .trigger:hover + .tooltip</span> {
    <span class="property">opacity</span>: <span class="value">1</span>;
    <span class="property">transform</span>: <span class="value">translateX(-50%) translateY(0)</span>;
}</code></pre>
                </div>
            </div>
            
            <!-- 旋转进入动画 -->
            <div class="animation-card rotate-in-out">
                <h2 class="card-title">旋转进入效果</h2>
                <p>元素轻微旋转进入，悬停结束时旋转退出</p>
                <button class="trigger">悬停查看效果</button>
                <div class="tooltip tooltip-base">
                    <strong>旋转进入效果</strong>
                    <p>元素旋转进入，悬停结束时旋转退出</p>
                </div>
                
                <div class="code-container">
                    <div class="code-header">
                        <span>CSS 代码</span>
                        <button class="copy-btn">复制代码</button>
                    </div>
                    <pre><code><span class="comment">/* 旋转进入动画 */</span>
<span class="selector">.rotate-in-out .tooltip</span> {
    <span class="property">transform</span>: <span class="value">translateX(-50%) rotate(-10deg) scale(0.9)</span>;
    <span class="property">transform-origin</span>: <span class="value">top center</span>;
    <span class="property">transition</span>: <span class="value">opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)</span>;
}

<span class="selector">.rotate-in-out .trigger:hover + .tooltip</span> {
    <span class="property">opacity</span>: <span class="value">1</span>;
    <span class="property">transform</span>: <span class="value">translateX(-50%) rotate(0) scale(1)</span>;
}</code></pre>
                </div>
            </div>
            
            <!-- 3D翻转动画 -->
            <div class="animation-card flip-in-out">
                <h2 class="card-title">3D翻转效果</h2>
                <p>3D翻转进入，带有透视效果</p>
                <button class="trigger">悬停查看效果</button>
                <div class="tooltip tooltip-base">
                    <strong>3D翻转效果</strong>
                    <p>元素以3D方式翻转进入，悬停结束时翻转退出</p>
                </div>
                
                <div class="code-container">
                    <div class="code-header">
                        <span>CSS 代码</span>
                        <button class="copy-btn">复制代码</button>
                    </div>
                    <pre><code><span class="comment">/* 3D翻转动画 */</span>
<span class="selector">.flip-in-out .tooltip</span> {
    <span class="property">transform</span>: <span class="value">translateX(-50%) perspective(1000px) rotateX(90deg)</span>;
    <span class="property">transform-origin</span>: <span class="value">top center</span>;
    <span class="property">opacity</span>: <span class="value">0</span>;
    <span class="property">transition</span>: <span class="value">opacity 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)</span>;
}

<span class="selector">.flip-in-out .trigger:hover + .tooltip</span> {
    <span class="property">opacity</span>: <span class="value">1</span>;
    <span class="property">transform</span>: <span class="value">translateX(-50%) perspective(1000px) rotateX(0)</span>;
}</code></pre>
                </div>
            </div>
        </div>
        
        <footer>
            <p>提示：悬停在按钮上查看各种动画效果 | 每种效果都有不同的进入和退出动画</p>
        </footer>
    </div>

    <script>
        // 复制代码功能
        document.querySelectorAll('.copy-btn').forEach(button => {
            button.addEventListener('click', function() {
                const code = this.parentNode.nextElementSibling.textContent;
                navigator.clipboard.writeText(code).then(() => {
                    const originalText = this.textContent;
                    this.textContent = '已复制!';
                    setTimeout(() => {
                        this.textContent = originalText;
                    }, 2000);
                });
            });
        });
    </script>
</body>
</html>